<!-- svg图标组件 -->
<template>
  <div>
    <!-- svg标签是外层容器节点，内部需要与use标签结合使用 -->
    <svg :style="svgStyle">
      <!-- xlink：href执行用哪个图标，属性务必是# icon-图标名称 -->
      <!-- use的fill可以设置图标颜色 -->
      <use :xlink:href="front + iconName" :fill="iconColor"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  // 默认前缀
  front: {
    type: String,
    default: '#icon-',
  },
  // 图标名字
  iconName: {
    type: String,
    default: '',
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: '',
  },
  // svg大小
  svgStyle: {
    type: Object,
    default: {},
  },
})
</script>

<style scoped></style>
